<template>
  <div style="height:100%;">
    <!-- 侧边栏 -->
    <el-menu style="height:100%;" router :collapse="isCollapse" :collapse-transition='false'>
      <!-- 系统首页 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">系统首页</span>
      </el-menu-item>

      <!-- 基础表格 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">基础表格</span>
      </el-menu-item>
      <!-- tab选项卡 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">tab选项卡</span>
      </el-menu-item>
      <!-- 表单相关 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-edit"></i>
          <span>表单相关</span>
        </template>
        <el-menu-item>
          <template slot="title">
            <i class="el-icon-edit"></i>
            <span>第一</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <!-- 自定义图标 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">自定义图标</span>
      </el-menu-item>
      <!-- schart图表 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">schart图表</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {};
  },
  computed: {
      isCollapse(){
        return this.$store.state.isCollapse
    }
  },
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped>
</style>
